<template>
	<view class="feedback-list-bg">
		<view class="feedback-list-header">
			<view class="header-title">我的反馈</view>
			<view class="add-feedback" @click="goToSend">
				<text class="iconfont icon-icon25201"></text>
				<text>发布反馈</text>
			</view>
		</view>

		<!-- 空状态 -->
		<view v-if="feedbackList.length === 0" class="empty-state">
			<image src="/static/images/empty.png" mode="aspectFit" class="empty-image"></image>
			<text class="empty-text">暂无反馈记录</text>
		</view>
		

		<!-- 列表内容 -->
		<view v-else class="feedback-list">
			<view v-for="(item, index) in feedbackList" :key="index" class="feedback-item" @click="viewDetail(item)">
				<view class="feedback-header">
					<view class="feedback-type">{{ getTypeText(item.type) }}</view>
					<view class="feedback-status" :class="{
						'status-pending': item.status === 2,
						'status-processed': item.status === 1,
						'status-rejected': item.status === 3
					}">{{ getStatusText(item.status) }}</view>
				</view>
				<view class="feedback-title">{{ item.title }}</view>
				<view class="feedback-desc">{{ item.content }}</view>
				
				<!-- 图片预览 -->
				<view class="feedback-images" v-if="item.images && item.images.length > 0">
					<image 
						v-for="(img, imgIndex) in getImageArray(item.images).slice(0, 3)" 
						:key="imgIndex" 
						:src="img" 
						mode="aspectFill" 
						class="feedback-image"
						@click.stop="previewImage(getImageArray(item.images), imgIndex)"
					></image>
					<view class="image-count" v-if="getImageArray(item.images).length > 3">+{{ getImageArray(item.images).length - 3 }}</view>
				</view>
				
				<!-- 金额信息 -->
				<view class="feedback-money" v-if="item.money > 0">
					<text class="money-label">成交金额：</text>
					<text class="money-value">¥{{ item.money }}</text>
				</view>
				
				<!-- 建议信息 -->
				<view class="feedback-suggest" v-if="item.suggest">
					<text class="suggest-label">建议：</text>
					<text class="suggest-content">{{ item.suggest }}</text>
				</view>
				
				<!-- 驳回理由 -->
				<view class="feedback-reject-reason" v-if="item.status === 3 && item.remark">
					<text class="reject-reason-label">驳回理由：</text>
					<text class="reject-reason-content">{{ item.remark }}</text>
				</view>
				
				<view class="feedback-footer">
					<view class="feedback-time">{{ item.create_time }}</view>
					<view class="feedback-actions">
						<view class="action-btn edit-btn" @click.stop="editFeedback(item)" v-if="item.status === 3">编辑</view>
						<view class="action-btn delete-btn" @click.stop="deleteFeedback(index, item.id)">删除</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 加载更多 -->
		<uni-load-more :status="loadMoreStatus" :contentText="loadMoreText"></uni-load-more>
		
		
		
		
	</view>
</template>

<script>
	import {
		PlatformFeedBackGetUserList,
		PlatformFeedBackDelete,
		PlatformFeedBackDetail
	} from "@/api/extend.js"
	export default {
		data() {
			return {
				feedbackList: [],
				page: 1,
				limit: 10,
				loadMoreStatus: 'more',
				loadMoreText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}
			}
		},
		onLoad() {
			this.loadData();
		},
		onPullDownRefresh() {
			this.page = 1;
			this.loadData(true);
		},
		onReachBottom() {
			if (this.loadMoreStatus !== 'noMore') {
				this.page++;
				this.loadData();
			}
		},
		methods: {
			loadData(isRefresh = false) {
				this.loadMoreStatus = 'loading';
				
				PlatformFeedBackGetUserList({
					page: this.page,
					limit: this.limit,
					status: 4, // 全部状态
					type: 4 // 全部类型
				}).then(res => {
					if (res.status === 200) {
						const list = res.data.data || [];
						
						if (this.page === 1) {
							this.feedbackList = list;
						} else {
							this.feedbackList = [...this.feedbackList, ...list];
						}
						
						if (list.length < this.limit || this.page >= res.data.last_page) {
							this.loadMoreStatus = 'noMore';
						} else {
							this.loadMoreStatus = 'more';
						}
					} else {
						uni.showToast({
							title: res.message || '加载失败',
							icon: 'none'
						});
						this.loadMoreStatus = 'more';
					}
					
					if (isRefresh) {
						uni.stopPullDownRefresh();
					}
				}).catch(err => {
					console.error('获取反馈列表失败', err);
					this.loadMoreStatus = 'more';
					
					if (isRefresh) {
						uni.stopPullDownRefresh();
					}
					
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					});
				});
			},
			goToSend() {
				uni.navigateTo({
					url: '/pages/extend/index/index_feedback_send'
				});
			},
			viewDetail(item) {
				// 查看详情，可以传递 ID 到详情页
				uni.navigateTo({
					url: `/pages/extend/index/index_feedback_desc?id=${item.id}`
				});
			},
			editFeedback(item) {
				// 编辑被驳回的反馈
				uni.navigateTo({
					url: `/pages/extend/index/index_feedback_send?id=${item.id}`
				});
			},
			getImageArray(imageStr) {
				if (!imageStr) return [];
				return typeof imageStr === 'string' ? imageStr.split(',') : imageStr;
			},
			previewImage(images, current) {
				uni.previewImage({
					urls: images,
					current: images[current]
				});
			},
			deleteFeedback(index, id) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这条反馈吗？',
					success: res => {
						if (res.confirm) {
							// 调用删除接口
							PlatformFeedBackDelete({
								id: id
							}).then(res => {
								if (res.status === 200) {
									this.feedbackList.splice(index, 1);
									uni.showToast({
										title: '删除成功',
										icon: 'success'
									});
								} else {
									uni.showToast({
										title: res.message || '删除失败',
										icon: 'none'
									});
								}
							}).catch(err => {
								console.error('删除反馈失败', err);
								uni.showToast({
									title: '删除失败，请重试',
									icon: 'none'
								});
							});
						}
					}
				});
			},
			getStatusText(status) {
				if (status === 2) return '审核中';
				if (status === 1) return '已通过';
				if (status === 3) return '未通过';
				return '审核中';
			},
			getTypeText(type) {
				if (type === 1) return '沙龙感想';
				if (type === 2) return '贵商反馈';
				if (type === 3) return '贵商寄语';
				return '未知类型';
			},
			formatTime(time) {
				if (!time) return '';
				return time;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.feedback-list-bg {
		min-height: 100vh;
		background: linear-gradient(180deg, #eaf2ff 0%, #f7fafd 100%);
		padding: 10rpx 0 40rpx 0;
	}
	
	.feedback-list-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx 24rpx;
		
		.header-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #222;
		}
		
		.add-feedback {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #4e7fff;
			
			.iconfont {
				margin-right: 8rpx;
				font-size: 32rpx;
			}
		}
	}
	
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 0;
		
		.empty-image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}
		
		.empty-text {
			font-size: 28rpx;
			color: #999;
		}
	}
	
	.feedback-list {
		padding: 0 24rpx;
	}
	
	.feedback-item {
		background: #fff;
		border-radius: 24rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 16rpx 0 rgba(78, 127, 255, 0.08);
	}
	
	.feedback-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
		
		.feedback-type {
			font-size: 24rpx;
			color: #4e7fff;
			background: rgba(78, 127, 255, 0.1);
			padding: 6rpx 16rpx;
			border-radius: 20rpx;
		}
		
		.feedback-status {
			font-size: 24rpx;
			padding: 6rpx 16rpx;
			border-radius: 20rpx;
		}
		
		.status-pending {
			color: #ff9500;
			background: rgba(255, 149, 0, 0.1);
		}
		
		.status-processed {
			color: #52c41a;
			background: rgba(82, 196, 26, 0.1);
		}
		
		.status-rejected {
			color: #ff4d4f;
			background: rgba(255, 77, 79, 0.1);
		}
	}
	
	.feedback-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #222;
		margin-bottom: 12rpx;
	}
	
	.feedback-desc {
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
		margin-bottom: 16rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.feedback-images {
		display: flex;
		margin-bottom: 16rpx;
		position: relative;
		
		.feedback-image {
			width: 140rpx;
			height: 140rpx;
			margin-right: 12rpx;
			border-radius: 12rpx;
		}
		
		.image-count {
			position: absolute;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
			color: #fff;
			font-size: 24rpx;
			padding: 4rpx 12rpx;
			border-radius: 0 0 12rpx 0;
		}
	}
	
	.feedback-money {
		font-size: 28rpx;
		margin-bottom: 16rpx;
		
		.money-label {
			color: #666;
		}
		
		.money-value {
			color: #ff5722;
			font-weight: 600;
		}
	}
	
	.feedback-suggest {
		font-size: 28rpx;
		margin-bottom: 16rpx;
		
		.suggest-label {
			color: #666;
			font-weight: 600;
		}
		
		.suggest-content {
			color: #333;
		}
	}
	
	.feedback-reject-reason {
		font-size: 28rpx;
		margin-bottom: 16rpx;
		padding: 16rpx;
		background-color: #fff2f0;
		border-radius: 12rpx;
		
		.reject-reason-label {
			color: #666;
			font-weight: 600;
		}
		
		.reject-reason-content {
			color: #ff4d4f;
			margin-left: 8rpx;
		}
	}
	
	.feedback-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #f0f0f0;
		padding-top: 16rpx;
		
		.feedback-time {
			font-size: 24rpx;
			color: #999;
		}
		
		.feedback-actions {
			display: flex;
			
			.action-btn {
				font-size: 24rpx;
				padding: 6rpx 16rpx;
				border-radius: 20rpx;
				margin-left: 16rpx;
			}
			
			.delete-btn {
				color: #ff4d4f;
				background: rgba(255, 77, 79, 0.1);
			}
			
			.edit-btn {
				color: #4e7fff;
				background: rgba(78, 127, 255, 0.1);
			}
		}
	}
</style>